<template>
	<view class="edit">
		<u-field v-model="dataForm.name" required label="名称" placeholder="请填写名称" input-align='right'>
		</u-field>
		<u-field label-width="150" label="所属旅行社" disabled input-align='right'>
			<text slot='right' class="text"
				@click="open('travelagencyshow')">{{travelagencycNum >= 0?travelagencyList[travelagencycNum].name:'请选择所属旅行社'}}</text>
		</u-field>
		<u-field label="活动分类" disabled input-align='right'>
			<text slot='right' class="text"
				@click="open('activityshow')">{{ticket_activityNum >= 0?activityList[ticket_activityNum].name:'请选择活动分类'}}</text>
		</u-field>
		<u-field label="线路分类" disabled input-align='right'>
			<text slot='right' class="text"
				@click="open('travelmodeshow')">{{travelmodeNum >= 0?travelmodeList[travelmodeNum].name:'请选择线路分类'}}</text>
		</u-field>
		<u-field v-model="dataForm.setout" label="出发地" required placeholder="如:广州" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.objective" label="目的地" required placeholder="如:深圳" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.departuredate" label="出团日期" required placeholder="如:每周六日出团" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.tripdays" label="出行天数" required placeholder="请填写出行天数" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.business_name" label="产品来源" placeholder="记录供应商名称" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.price" label="显示价格" placeholder="请填写显示价格" input-align='right'>
		</u-field>
		<u-field v-model="dataForm.start_effective" label="有效期（开始）" label-width="200" disabled placeholder="请选择时间"
			input-align='right' @click="open('sTime')">
		</u-field>
		<u-field v-model="dataForm.end_effective" label="有效期（结束）" label-width="200" disabled placeholder="请选择时间"
			input-align='right' @click="open('eTime')">
		</u-field>
		<u-field v-model="dataForm.start_date" label="活动时间（开始）" label-width="240" disabled placeholder="请选择时间"
			input-align='right' @click="open('sdTime')">
		</u-field>
		<u-field v-model="dataForm.end_date" label="活动时间（结束）" label-width="240" disabled placeholder="请选择时间"
			input-align='right' @click="open('edTime')">
		</u-field>
		<u-field v-model="dataForm.sale_time" label="销售时间段" label-width="150" placeholder="如:12:00-12:00"
			input-align='right'>
		</u-field>
		<!-- <u-field  required label="产品标签" disabled  input-align='right' @click="open('tagshow')">
			<text slot='right' class="text" @click="open('tagshow')">{{tagNum >= 0?tagList[tagNum].name:'请选择产品标签'}}</text>
		</u-field>
		<u-field  label="保险" disabled  input-align='right' >
			<text slot='right' class="text" @click="open('insuranceshow')">{{insurance_listNum >= 0?insuranceList[insurance_listNum].name:'请选择保险'}}</text>
		</u-field> -->
		<u-field v-model="dataForm.resume" required label="产品简述" type='textarea' placeholder="产品简述" input-align='right'
			:clearable="false">
		</u-field>
		<u-field label="排序" disabled input-align='right'>
			<u-number-box v-model="dataForm.sort" slot='right'></u-number-box>
		</u-field>
		<u-field v-model="mobile" label="显示状态" disabled input-align='right'>
			<u-switch v-model="checked" slot='right'></u-switch>
		</u-field>
		<view class="title">产品图片</view>
		<view class="upload-box">
			<view class="item" v-for="(item,index) in imgList" :key='index'>
				<image class="item-img" :src="item" mode=""></image>
			</view>
			<view class="upload" @click="upload">
				<view class="iconfont iconfont-e623 icon"></view>
			</view>
		</view>
		<view class="btn" @click="submit">提交</view>
		<u-picker v-model="travelagencyshow" mode="selector" :range="travelagencyList" range-key="name"
			@confirm="change($event,'travelagencycNum')"></u-picker>
		<u-picker v-model="activityshow" mode="selector" :range="activityList" range-key="name"
			@confirm="change($event,'ticket_activityNum')"></u-picker>
		<u-picker v-model="travelmodeshow" mode="selector" :range="travelmodeList" range-key="name"
			@confirm="change($event,'travelmodeNum')"></u-picker>
		<u-picker v-model="sTime" mode="time" :params="params" @confirm="changeTime($event,'start_effective')">
		</u-picker>
		<u-picker v-model="eTime" mode="time" :params="params" @confirm="changeTime($event,'end_effective')"></u-picker>
		<u-picker v-model="sdTime" mode="time" :params="params" @confirm="changeTime($event,'start_date')"></u-picker>
		<u-picker v-model="edTime" mode="time" :params="params" @confirm="changeTime($event,'end_date')"></u-picker>
		<!-- 	<u-picker v-model="tagshow" mode="selector" :range="tagList" range-key="name" @confirm="change($event,'tagNum')"></u-picker>
		<u-picker v-model="insuranceshow" mode="selector" :range="insuranceList" range-key="name" @confirm="change($event,'insurance_listNum')"></u-picker> -->
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/utils/upload.js'
	import {formatDate} from '@/utils/moment/index'
	export default {
		data() {
			return {
				dataForm: {
					name: '',
					fk_travelagency_id: 0,
					fk_ticket_activity_id: 0,
					travelmode: 0,
					setout: '',
					objective: '',
					departuredate: '',
					tripdays: '',
					business_name: '',
					price: 0,
					resume: '',
					start_effective: '',
					end_effective: '',
					start_date: '',
					end_date: '',
					sale_time: '',
					tag: 0,
					is_online: 1,
					// insurance_list:'',
					sort: 99,
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				travelagencycNum: undefined, //选择的下标
				ticket_activityNum: undefined,
				travelmodeNum: undefined,
				// tagNum:undefined,
				// insurance_listNum:undefined,
				checked: false,
				travelagencyshow: false,
				activityshow: false,
				travelmodeshow: false,
				sTime: false,
				eTime: false,
				sdTime: false,
				edTime: false,
				// tagshow:false,
				// insuranceshow:false,
				travelagencyList: [],
				activityList: [],
				travelmodeList: [],
				imgList: []
				// tagList:[],
				// insuranceList:[]

			}
		},
		onLoad(option) {
			this.initPage()
			if (option.id) {
				this.getDeatil(option.id)
			}
		},
		methods: {
			initPage() {
				Promise.all([
					this.$GetQueryDataList('b_ticket_insurance', 1, 100, {
						fk_business_id: this.vuex_adminuser.pk_id
					}),
					this.$GetQueryDataList('m_common_dictionary', 1, 100, {
						fk_business_id: this.vuex_adminuser.pk_id,
						type: 4,
						status: 1
					}),
					this.$GetQueryDataList('m_common_classify', 1, 100, {
						fk_business_id: this.vuex_adminuser.pk_id,
						type: 4
					}),
					this.$GetQueryDataList('m_common_activity', 1, 100, {
						fk_business_id: this.vuex_adminuser.pk_id,
						type: 4
					}),
					this.$GetQueryDataList('b_travelagency', 1, 100, {
						fk_business_id: this.vuex_adminuser.pk_id,
					})
				]).then(res => {
					// this.insuranceList = res[0].data
					// this.tagList = res[1].data
					this.travelmodeList = res[2].data
					this.activityList = res[3].data
					this.travelagencyList = res[4].data
				})
			},
			open(name) {
				this[name] = true
			},
			change(e, name) {
				this[name] = e[0]
			},
			changeTime(e, name) {
				this.dataForm[name] = e.year + '-' + e.month + '-' + e.day + ' '+ e.hour + ':' + e.minute
			},
			upload() {
				uploadImage().then(res => {
					this.imgList = [...this.imgList, ...res]
				})
			},
			submit() {
				let {
					name,
					setout,
					objective,
					departuredate,
					tripdays,
					resume
				} = this.dataForm
				if (!name) {
					return this.$toast('名称不能为空')
				} else if (!setout) {
					return this.$toast('出发地不能为空')
				} else if (!objective) {
					return this.$toast('目的地不能为空')
				} else if (!departuredate) {
					return this.$toast('出团日期不能为空')
				} else if (!tripdays) {
					return this.$toast('出行天数不能为空')
				} else if (!tripdays) {
					return this.$toast('出行天数不能为空')
				} else if (!resume) {
					return this.$toast('产品简述不能为空')
				} else if (this.imgList.length < 1) {
					return this.$toast('产品图片不能为空')
				}
				this.dataForm.status = this.checked ? 1 : 0
				this.dataForm.img = this.imgList.join(',')
				if (this.travelagencycNum>=0) {
					this.dataForm.fk_travelagency_id = this.travelagencyList[this.travelagencycNum].pk_id
				}
				if (this.ticket_activityNum>=0) {
					this.dataForm.fk_ticket_activity_id = this.activityList[this.ticket_activityNum].pk_id
				}
				if (this.travelmodeNum>=0) {
					this.dataForm.travelmode = this.travelmodeList[this.travelmodeNum].pk_id
				}
				this.dataForm.fk_business_id = this.vuex_adminuser.pk_id
				if(this.dataForm.pk_id){
					this.$UpdateModify('b_travelagency_pro',{...this.dataForm}).then(res=>{
						this.$toast('提交成功')
						setTimeout(() => {
							this.uniBack(1)
						}, 1000)
					}).catch(err => {
						this.$toast(err)
					})
				}else{
					this.$AddNewData('b_travelagency_pro', {
						...this.dataForm
					}).then(res => {
						this.$toast('提交成功')
						setTimeout(() => {
							this.uniBack(1)
						}, 1000)
					}).catch(err => {
						this.$toast(err)
					})
				}
			},
			//编辑初始化数据
			getDeatil(id) {
				this.$GetQueryDataList('b_travelagency_pro', 1, 1, {
					pk_id: id
				}).then(res => {
					console.log(res)
					this.dataForm = res.data[0]
					this.imgList = this.dataForm.img.split(',')
					this.checked = this.dataForm.status == 1 ?true:false
					this.travelagencyList.forEach((item,index)=>{
						if(item.pk_id == this.dataForm.fk_travelagency_id){
							this.travelagencycNum = index
						}
					})
					this.activityList.forEach((item,index)=>{
						if(item.pk_id == this.dataForm.fk_ticket_activity_id){
							this.ticket_activityNum = index
						}
					})
					this.travelmodeList.forEach((item,index)=>{
						if(item.pk_id == this.dataForm.travelmode){
							this.travelmodeNum = index
						}
					})
					if (this.dataForm.end_date == '1900-01-01T00:00:00' || this.dataForm.start_date ==
						'1900-01-01T00:00:00') {
						this.dataForm.end_date = ''
						this.dataForm.start_date = ''
					}else{
						this.dataForm.end_date = formatDate(this.dataForm.end_date,'YYYY-MM-DD HH:mm:ss')
						this.dataForm.start_date = formatDate(this.dataForm.start_date,'YYYY-MM-DD HH:mm:ss')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit {
		.title {
			width: 100%;
			height: 80rpx;
			padding: 0 28rpx;
			position: relative;
			line-height: 80rpx;

			&::before {
				content: '*';
				color: red;
				position: absolute;
				top: 6rpx;
				left: 14rpx;
			}
		}

		.text {
			color: #666;
			font-size: 26rpx;
		}

		.upload-box {
			padding: 0 28rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			&::after {
				content: '';
				width: 200rpx;
				height: 200rpx;
			}

			.item {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.item-img {
					width: 100%;
					height: 100%;
				}
			}

			.upload {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				background-color: #f4f5f6;

				.icon {
					color: #ccc;
					font-size: 30rpx;
				}
			}
		}

		.btn {
			width: 698rpx;
			height: 80rpx;
			border-radius: 20rpx;
			margin: 60rpx auto;
			background-color: #3297EF;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
